<template>
  <div class="answer-and-explain">
    <div class="answer">
      <div class="left-box">
        <span>我的答案：{{ reviewResult.myAnswer }}</span>
        <span>正确答案：{{ reviewResult.correct }}</span>
      </div>

      <div class="status-score">
        <span class="status">
          <i style="color:green" v-if="reviewResult.isCorrect" class="iconfont icon-duigou"></i>
          <i style="color:red" v-else class="iconfont icon-V"></i>
        </span>
        <span class="score"
          >{{ reviewResult.score }}
          <span style="font-size: 14px"> 分</span>
        </span>
      </div>
    </div>
    <div class="explain">
      <span>答案解析：</span>
      {{ reviewResult.explain }}
    </div>
  </div>
</template>

<script>
export default {
  name: "AnswerExplain",
  props: ["reviewResult"],
};
</script>

<style lang='less' scoped>
.answer-and-explain {
  width: 95%;
  min-height: 20px;
  line-height: 20px;
  padding: 16px 20px;
  margin-top: 16px;
  border: solid #f0f3f7 1px;
  border-left: 5px solid #e1e7f0;
  .answer {
    display: flex;
    justify-content: space-between;
    .left-box {
      span {
        &:nth-child(2) {
          margin-left: 40px;
          color: #00b86e;
        }
      }
    }
    .status-score {
      font-size: 2em;
      width: 150px;
      display: flex;
      justify-content: space-around;
    }
  }

  .explain {
    font-size: 13px;
    color: #a8a8b3;
    span {
      font-weight: 800;
    }
  }
}
</style>